<template>
  <div class="table_tree">
    <div class="table_top">
      <div class="table_top_L">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="审批人">
            <el-input v-model="formInline.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="inquire">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_top_R">
        <el-button type="primary" @click="handleClick()">新增</el-button>
        <el-button
          type="danger"
          @click="del('批量删除')"
          :disabled="!selectionLength"
          >批量删除</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%"
      ref="table"
      current-row-key="id"
      row-key="id"
      key="id"
      column-key="id"
      @selection-change="selectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="text-align: left">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="日期">
                <span>{{ props.row.date }}</span>
              </el-form-item>
              <el-form-item label="姓名">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="图片">
                <el-image
              :src="props.row.img"
              style="max-width: 80px; max-height: 80px; border-radius: 5px"
              :preview-src-list="tableData.map((v) => v.img)"
            />
              </el-form-item>
              <el-form-item label="省份">
                <span>{{ props.row.province }}</span>
              </el-form-item>
              <el-form-item label="市区">
                <span>{{ props.row.city }}</span>
              </el-form-item>
              <el-form-item label="地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
               <el-form-item label="邮编">
                <span>{{ props.row.zip }}</span>
              </el-form-item>
              
            </el-form>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id" width="50"> </el-table-column>
      <el-table-column prop="date" label="日期" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="img" label="图片" width="100">
        <template slot-scope="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-image
              :src="scope.row.img"
              style="max-width: 80px; max-height: 80px; border-radius: 5px"
              :preview-src-list="tableData.map((v) => v.img)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="province" label="省份"> </el-table-column>
      <el-table-column prop="city" label="市区"> </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
        <template slot-scope="scope">
          <div v-if="changeId == scope.row.id">
            <el-input
              placeholder="请输入内容"
              v-model="scope.row.address"
              clearable
            ></el-input>
          </div>
          <div v-else>
            <span>{{ scope.row.address }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120">
        <template slot-scope="scope">
          <div v-if="changeId == scope.row.id">
            <el-input
              placeholder="请输入内容"
              v-model="scope.row.zip"
              clearable
            ></el-input>
          </div>
          <div v-else>
            <span>{{ scope.row.zip }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" :key="Date.now()" fixed="right">
        <template slot-scope="scope">
          <div v-if="changeId == scope.row.id">
            <el-button plain size="small" @click="changeId = 99999"
              >取消</el-button
            >
            <el-button
              type="success"
              plain
              size="small"
              @click="save(scope.row)"
              >保存</el-button
            >
          </div>
          <div v-else>
            <el-button
              @click="changeId = scope.row.id"
              type="warning"
              plain
              size="small"
              :autofocus="true"
              >修改</el-button
            >
            <el-button
              plain
              type="danger"
              size="small"
              :autofocus="false"
              native-type="submit"
              @click="del('单个删除', scope.$index)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @current-change="paginationChange"
        small
        background
        layout="prev, pager, next"
        :total="5000"
      >
      </el-pagination>
    </div>
    <!-- 操作弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="#"
            accept=".png,.jpeg,.jpg"
            list-type="picture-card"
            :auto-upload="false"
            ref="upload"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div
              slot="file"
              slot-scope="{ file }"
              style="width: 100%; height: 100%"
            >
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :modal="false" :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onChange">立即提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      listLoading: true,
      dialogFormVisible: false, //新增或者编辑弹窗
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      changeId: 99999,
      selectionLength: 0, //选中的行
      formInline: {
        user: "",
        region: "",
      },
      dialogTitle: "新增",
    };
  },
  mounted() {
    this.tableData = this.reqData();
    this.listLoading = false;
  },
  methods: {
    onChange() {
      this.dialogFormVisible = false;
      this.$message({
        type: "success ",
        message: `提交成功`,
      });
    },
    inquire() {
      console.log("inquire!");
    },
    selectionChange(selection) {
      this.selectionLength = selection.length;
    },
    save(data) {
      console.log(data, "保存成功");
      this.$message({
        type: "success",
        message: "删除成功!",
      });
      this.changeId = 99999;
    },
    onSubmit() {
      console.log(this.form);
    },
    handleClick(row) {
      console.log(row);
      this.dialogFormVisible = true;
    },
    // 分切改变，返回页码
    paginationChange(page) {
      console.log(page);
      this.listLoading = true;
      this.tableData = this.reqData();
      this.$nextTick(() => {
        this.listLoading = false;
        this.$refs.table.bodyWrapper.scrollTop = 0;
      });
    },
    // 请求
    reqData() {
      var data = [];
      for (let index = 1; index <= 20; index++) {
        data.push({
          id: index,
          date: Date.now(),
          name: "迪丽热巴",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 号",
          zip: 200333,
          img:
            index % 2 == 0
              ? "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2340175123,3483783040&fm=26&gp=0.jpg"
              : "http://pic1.win4000.com/pic/1/18/0d7870d6bf.jpg",
        });
      }
      return data;
    },
    del(type, index) {
      this.changeId = ++this.changeId;
      if (type === "批量删除" && this.$refs.table.selection.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择至少一项要删除的信息",
        });
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });

          this.$refs["table"].doLayout();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleRemove(file) {
      var FilesArray = this.$refs.upload.uploadFiles;
      var index = FilesArray.indexOf(file);
      FilesArray.splice(index, 1);
    },
    handleExceed() {
      this.$message({
        message: "只能上传一张照片，请删除后再试~",
        type: "warning",
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.table_tree {
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  .table_top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    .table_top_L {
      text-align-last: left;
      flex: 1;
      overflow: hidden;
    }
  }
  .paging {
    padding-top: 15px;
  }
}
</style>
<style>
.table_tree .el-table {
  transition: all ease-in-out 0.3s;
}
.table_tree .el-table td,
.table_tree .el-table th {
  text-align: center;
}
.table_tree .el-dialog {
  text-align: left;
}
.table_tree .el-dialog .line {
  text-align: center;
}
.el-table {
  width: 99.9%;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>